<%--
  Created by IntelliJ IDEA.
  User: ASUS
  Date: 2020/8/17
  Time: 21:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link href="assets/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="css/style.css"/>
    <link href="assets/css/codemirror.css" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/ace.min.css" />
    <link rel="stylesheet" href="font/css/font-awesome.min.css" />
    <!--[if lte IE 8]>
    <link rel="stylesheet" href="assets/css/ace-ie.min.css" />
    <![endif]-->
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="Widget/Validform/5.3.2/Validform.min.js"></script>
    <script src="assets/js/typeahead-bs2.min.js"></script>
    <script src="assets/js/jquery.dataTables.min.js"></script>
    <script src="assets/js/jquery.dataTables.bootstrap.js"></script>
    <script src="assets/layer/layer.js" type="text/javascript" ></script>
    <script src="js/lrtk.js" type="text/javascript" ></script>
    <script src="assets/layer/layer.js" type="text/javascript"></script>
    <script src="assets/laydate/laydate.js" type="text/javascript"></script>
    <title>管理员</title>
</head>

<body>
<div class="page-content clearfix">
    <div class="administrator">
        <div class="d_Confirm_Order_style">
            <div class="search_style">
                <div class="title_names">搜索查询</div>
                <ul class="search_content clearfix">
                    <li><label class="l_f">管理员名称</label><input name="" type="text"  class="text_add" placeholder=""  style=" width:400px"/></li>
                    <li><label class="l_f">添加时间</label><input class="inline laydate-icon" id="start" style=" margin-left:10px;"></li>
                    <li style="width:90px;"><button type="button" class="btn_search"><i class="fa fa-search"></i>查询</button></li>
                </ul>
            </div>
            <!--操作-->
            <div class="border clearfix">
       <span class="l_f">
        <a href="javascript:ovid()" id="administrator_add" class="btn btn-warning"><i class="fa fa-plus"></i> 添加管理员</a>
        <%--<a href="javascript:ovid()" class="btn btn-danger"><i class="fa fa-trash"></i> 批量删除</a>--%>
       </span>
                <%--<span class="r_f">共：<b>5</b>人</span>--%>
            </div>
            <!--管理员列表-->
            <div class="clearfix administrator_style" id="administrator">
                <div class="left_style">
                    <div id="scrollsidebar" class="left_Treeview">
                        <div class="show_btn" id="rightArrow"><span></span></div>
                        <div class="widget-box side_content" >
                            <div class="side_title"><a title="隐藏" class="close_btn"><span></span></a></div>
                            <div class="side_list"><div class="widget-header header-color-green2"><h4 class="lighter smaller">用户分类列表</h4></div>
                                <div class="widget-body">
                                    <ul class="b_P_Sort_list">
                                        <li><i class="fa fa-users green"></i> <a href="javascript:selAll()">全部用户</a></li>
                                        <li><i class="fa fa-users orange"></i> <a href="javascript:selFun(status)">管理员</a></li>
                                        <li><i class="fa fa-users orange"></i> <a href="javascript:selFunUser(status)">普通用户</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="table_menu_list"  id="testIframe">
                    <table class="table table-striped table-bordered table-hover" id="sample_table">
                        <thead>
                        <tr>
                            <th width="25px"><label><input type="checkbox" class="ace"><span class="lbl"></span></label></th>
                            <th width="80px">编号</th>
                            <th width="250px">登录名</th>
                            <th width="100px">手机</th>
                            <th width="100px">邮箱</th>
                            <th width="100px">角色</th>
                            <th width="180px">加入时间</th>
                            <th width="70px">状态</th>
                            <th width="200px">操作</th>
                        </tr>
                        </thead>
                        <tbody id="userInfo">
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <!--添加管理员-->
    <div id="add_administrator_style" class="add_menber" style="display:none">
        <form action="" method="post" id="form-admin-add">
            <div class="form-group">
                <label class="form-label"><span class="c-red">*</span>管理员：</label>
                <div class="formControls">
                    <input type="text" class="input-text" value="" placeholder="" id="user-name" name="user-name" datatype="*2-16" nullmsg="用户名不能为空">
                </div>
                <div class="col-4"> <span class="Validform_checktip"></span></div>
            </div>
            <div class="form-group">
                <label class="form-label"><span class="c-red">*</span>初始密码：</label>
                <div class="formControls">
                    <input type="password" placeholder="密码" id="userpassword" name="userpassword" autocomplete="off" value="" class="input-text" datatype="*6-20" nullmsg="密码不能为空">
                </div>
                <div class="col-4"> <span class="Validform_checktip"></span></div>
            </div>
            <div class="form-group">
                <label class="form-label "><span class="c-red">*</span>性别：</label>
                <div class="formControls "> <span class="select-box" style="width:150px;">
				<select class="select" id="sex" name="sex" size="1">
					<option value="1">男</option>
					<option value="2">女</option>
				</select>
				</span> </div>
                <div class="col-4"> <span class="Validform_checktip"></span></div>
            </div>
            <div class="form-group">
                <label class="form-label "><span class="c-red">*</span>手机：</label>
                <div class="formControls ">
                    <input type="text" class="input-text" value="" placeholder="" id="user-tel" name="user-tel" datatype="m" nullmsg="手机不能为空">
                </div>
                <div class="col-4"> <span class="Validform_checktip"></span></div>
            </div>
            <div class="form-group">
                <label class="form-label"><span class="c-red">*</span>邮箱：</label>
                <div class="formControls ">
                    <input type="text" class="input-text" placeholder="@" name="email" id="email" datatype="e" nullmsg="请输入邮箱！">
                </div>
                <div class="col-4"> <span class="Validform_checktip"></span></div>
            </div>
            <div class="form-group">
                <label class="form-label">角色：</label>
                <div class="formControls "> <span class="select-box" style="width:150px;">
				<select class="select" id="admin-role" name="admin-role" size="1">
					<option value="1">管理员</option>
					<option value="2">普通用户</option>
				</select>
				</span> </div>
            </div>
                <input class="btn btn-primary radius" type="button" id="Add_Administrator" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
        </form>
    </div>
    <%--修改用户信息--%>
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <form class="form-horizontal" role="form">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"
                                aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">修改数据</h4>
                    </div>
                    <div class="modal-body">

                        <div class="form-group">
                            <label class="col-sm-2 control-label">用户名</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="userName"
                                       name="userName" readonly="readonly" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">手机号</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="userPhone"
                                       name="userPhone" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">邮箱</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="userEmail"
                                       name="userEmail" />
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">角色</label>
                            <div class="col-sm-8">
                                <select class="select" id="userLevel" name="userLevel" size="1">
                                    <option value="1">管理员</option>
                                    <option value="2">普通用户</option>
                                </select>
                                <%--<input type="text" class="form-control" id="userLevel"
                                       name="userLevel" />--%>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">状态</label>
                            <div class="col-sm-8">
                                <select class="select" id="userStatus" name="userStatus" size="1">
                                    <option value="正常">正常</option>
                                    <option value="禁用">禁用</option>
                                </select>
                                <%--<input type="text" class="form-control" id="userStatus"
                                       name="userStatus" />--%>
                            </div>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" id="updateBtn">提交更改</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </form>
        </div>
        <!-- /.modal -->
    </div>
</div>
</body>
</html>
<script>
    $(function () {
        //进入页面默认查询所有用户信息
        $.ajax({
            type : "POST",
            url : "${pageContext.request.contextPath }/UserController/getAll",
            dataType : "json",
            success : function(result) {
                showData(result);
            }
        })
        //增加监听事件
        $("#Add_Administrator").click(function () {
            $.ajax({
                type : "POST",
                url : "${pageContext.request.contextPath }/UserController/addUser",
                dataType : "json",
                data : {
                    username:$("#user-name").val(),
                    password:$("#userpassword").val(),
                    sex:$(".ace").val(),
                    phone:$("#user-tel").val(),
                    email:$("#email").val(),
                    userLevel:$("#admin-role").val()
                },
                success : function (flag) {
                    if (flag){
                        $.ajax({
                            type : "POST",
                            url : "${pageContext.request.contextPath }/UserController/getAll",
                            dataType : "json",
                            success : function(result) {
                                showData(result);
                            }
                        })
                        layer.close(addLayer); //再执行关闭
                    }else{
                        alert("添加失败")
                    }
                }
            })
        })
        //修改监听事件
        $("#updateBtn").click(function(){
            $.ajax({
                type : "POST",
                url : "${pageContext.request.contextPath }/UserController/updateUser",
                dataType : "json",
                data : {
                    username:$("#userName").val(),
                    phone:$("#userPhone").val(),
                    email:$("#userEmail").val(),
                    userLevel:$("#userLevel").val(),
                    status:$("#userStatus").val()
                },
                success : function (flag) {
                    if (flag){
                        $("#myModal").modal('hide');
                        $.ajax({
                            type : "POST",
                            url : "${pageContext.request.contextPath }/UserController/getAll",
                            dataType : "json",
                            success : function(result) {
                                showData(result);
                            }
                        })
                    }else{
                        alert("修改失败")
                    }
                }
            })
        })

    })
    function showData(result) {
        $("#userInfo").empty();
        $.each(result,function (index, user) {
            var level="";
            if(user.userLevel==2){
                level="<span class='label label-info label-mini'>普通用户</span>"
            }else{
                level="<span class='label label-warning label-mini'>管理员 </span>";
            }
            $("#userInfo").append("<tr>\n" +
                "                            <td><label><input type=\"checkbox\" class=\"ace\"><span class=\"lbl\"></span></label></td>\n" +
                "                            <td>"+user.id+"</td>\n" +
                "                            <td>"+user.username+"</td>\n" +
                "                            <td>"+user.phone+"</td>\n" +
                "                            <td>"+user.email+"</td>\n" +
                "                            <td>"+level+"</td>\n" +
                "                            <td>"+user.createTime+"</td>\n" +
                "                            <td class=\"td-status\"><span class=\"label label-success radius\">"+user.status+"</span></td>\n" +
                "                            <td class=\"td-manage\">\n" +
                /*"                                <a onClick=\"member_stop(this,'10001')\"  href=\"javascript:;\" title=\"停用\"  class=\"btn btn-xs btn-success\"><i class=\"fa fa-check  bigger-120\"></i></a>\n" +*/
                "                                <a title=\"编辑\" data-toggle=\"modal\" data-target=\"#myModal\"\r\n" +
                "									data-username=\""+user.username +"\"\r\n" +
                "									data-userphone=\""+user.phone +"\"\r\n" +
                "									data-useremail=\""+user.email +"\"\r\n" +
                "									data-userlevel=\""+user.level +"\"\r\n" +
                "                                   data-userstatus=\""+user.status +"\" onclick=\"updateFun(this)\" href=\"javascript:;\"  class=\"btn btn-xs btn-info\" ><i class=\"fa fa-edit bigger-120\"></i></a>\n" +
                "                                <a title=\"删除\" href=\"javascript:delFun("+user.id+")\"  class=\"btn btn-xs btn-warning\" ><i class=\"fa fa-trash  bigger-120\"></i></a>\n" +
                "                            </td>\n" +
                "                        </tr>")
        })
    }
    //修改用户
    function updateFun(obj){
        var userName = $(obj).data("username");
        var userPhone = $(obj).data("userphone");
        var userEmail = $(obj).data("useremail");
        var userLevel = $(obj).data("userlevel");
        var userStatus = $(obj).data("userstatus");
        $("#userName").val(userName);
        $("#userPhone").val(userPhone);
        $("#userEmail").val(userEmail);
        $("#userLevel").val(userLevel);
        $("#userStatus").val(userStatus);
    }
    //注销用户
    function delFun(getUserId) {
        var flag = confirm("是否确认删除用户编号为:" + getUserId);
        if (flag) {
            //发送ajax请求
            $.ajax({
                type : "POST",
                url : "${pageContext.request.contextPath }/UserController/deleUser",
                dataType : "json",
                data : {id:getUserId,status:"禁用"},
                success : function (flag) {
                    if (flag){
                        $.ajax({
                            type : "POST",
                            url : "${pageContext.request.contextPath }/UserController/getAll",
                            dataType : "json",
                            success : function(result) {
                                showData(result);
                            }
                        })
                    }else{
                        alert("删除失败")
                    }
                }
            })
        }
    }
    //条件查询
    function selFun(status) {
            //发送ajax请求
            $.ajax({
                type : "POST",
                url : "${pageContext.request.contextPath }/UserController/getUser",
                dataType : "json",
                data : {userLevel:1},
                success : function (result) {
                    showData(result);
                }
            })
    }
    function selFunUser(status) {
        //发送ajax请求
        $.ajax({
            type : "POST",
            url : "${pageContext.request.contextPath }/UserController/getUser",
            dataType : "json",
            data : {userLevel:2},
            success : function (result) {
                showData(result);
            }
        })
    }
    function selAll() {
        //发送ajax请求
        $.ajax({
            type : "POST",
            url : "${pageContext.request.contextPath }/UserController/getAll",
            dataType : "json",
            success : function (result) {
                showData(result);
            }
        })
    }
</script>
<script type="text/javascript">
    jQuery(function($) {
        var oTable1 = $('#sample_table').dataTable( {
            "aaSorting": [[ 1, "desc" ]],//默认第几个排序
            "bStateSave": true,//状态保存
            "aoColumnDefs": [
                //{"bVisible": false, "aTargets": [ 3 ]} //控制列的隐藏显示
                {"orderable":false,"aTargets":[0,2,3,4,5,7,8,]}// 制定列不参与排序
            ] } );


        $('table th input:checkbox').on('click' , function(){
            var that = this;
            $(this).closest('table').find('tr > td:first-child input:checkbox')
                .each(function(){
                    this.checked = that.checked;
                    $(this).closest('tr').toggleClass('selected');
                });

        });


        $('[data-rel="tooltip"]').tooltip({placement: tooltip_placement});
        function tooltip_placement(context, source) {
            var $source = $(source);
            var $parent = $source.closest('table')
            var off1 = $parent.offset();
            var w1 = $parent.width();

            var off2 = $source.offset();
            var w2 = $source.width();

            if( parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2) ) return 'right';
            return 'left';
        }
    });

</script>
<script type="text/javascript">
    $(function() {
        $("#administrator").fix({
            float : 'left',
            //minStatue : true,
            skin : 'green',
            durationTime :false,
            spacingw:50,//设置隐藏时的距离
            spacingh:270,//设置显示时间距
        });
    });
    //字数限制
    function checkLength(which) {
        var maxChars = 100; //
        if(which.value.length > maxChars){
            layer.open({
                icon:2,
                title:'提示框',
                content:'您输入的字数超过限制!',
            });
            // 超过限制的字数了就将 文本框中的内容按规定的字数 截取
            which.value = which.value.substring(0,maxChars);
            return false;
        }else{
            var curr = maxChars - which.value.length; //250 减去 当前输入的
            document.getElementById("sy").innerHTML = curr.toString();
            return true;
        }
    };
    //初始化宽度、高度
    $(".widget-box").height($(window).height()-215);
    $(".table_menu_list").width($(window).width()-260);
    $(".table_menu_list").height($(window).height()-215);
    //当文档窗口发生改变时 触发
    $(window).resize(function(){
        $(".widget-box").height($(window).height()-215);
        $(".table_menu_list").width($(window).width()-260);
        $(".table_menu_list").height($(window).height()-215);
    })
    laydate({
        elem: '#start',
        event: 'focus'
    });

    /*产品-编辑*/
    function member_edit(title,url,id,w,h){
        layer_show(title,url,w,h);
    }

    /*添加管理员*/
    $('#administrator_add').on('click', function(){
        var addLayer=layer.open({
            type: 1,
            title:'添加管理员',
            area: ['700px',''],
            shadeClose: false,
            content: $('#add_administrator_style'),
        });
    })
</script>
